<script lang="ts" setup>
import { graphic } from 'echarts/core'
import { useSettingsStore } from '/@/store/modules/settings'
import { lightenColor } from '/@/utils/lightenColor'

defineOptions({
  name: 'Index',
})

const settingsStore = useSettingsStore()
const { theme } = storeToRefs(settingsStore)

const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    date: '18:00',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: '严重',
    tag: 'Home',
  },
  {
    date: '18:00',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: '警告',
    tag: 'Office',
  },
]
const option = reactive<any>({
  tooltip: {
    trigger: 'axis',
    formatter: '当前时刻:<br/>{b}<br/>当前负荷: <br/>{c}kw',
    extraCssText: 'width:120px;white-space:wrap',
    backgroundColor: '#21ba94',
    textStyle: {
      color: '#fff',
    },
    borderWidth: 0,
  },
  grid: {
    top: '5%',
    left: '5%',
    right: '5%',
    bottom: '10%',
    // containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
    axisTick: {
      alignWithLabel: true,
    },
  },

  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        opacity: 0.6,
      },
    },
  },

  series: {
    name: '当前时刻',
    type: 'line',
    smooth: false,
    lineStyle: {
      color: '#21ba94',
    },
    areaStyle: {
      color: '#b5e7db',
    },
    data: [120, 360, 210, 280, 430, 495, 160, 180, 268, 324, 500, 86, 470],
    itemStyle: {
      borderRadius: [2, 2, 0, 0],
      color: new graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: lightenColor(theme.value.color, 50) },
        { offset: 1, color: theme.value.color },
      ]),
    },
  },
})
const optionTwo = reactive<any>({
  tooltip: {
    trigger: 'item',
  },
  grid: {
    top: '5%',
    left: '2%',
    right: '4%',
    bottom: '0%',
    containLabel: true,
  },
  legend: {
    top: 'bottom',
    formatter (e: any) {
      let text = [
        { value: 79.5, name: '电网供电' },
        { value: 20.5, name: '储能放电' },
      ]
      if (e == '电网供电') {
        return `${e  }: ${  79.5}`
      } else {
        return `${e  }: ${  20.5}`
      }
    },
  },
  // toolbox: {
  //   show: true,
  //   feature: {
  //     mark: { show: true },
  //     dataView: { show: true, readOnly: false },
  //     restore: { show: true },
  //     saveAsImage: { show: true },
  //   },
  // },
  series: [
    {
      name: '',
      type: 'pie',
      radius: [150, 200],
      center: ['50%', '50%'],
      // roseType: 'area',
      itemStyle: {
        borderRadius: 8,
      },
      label: {
        show: true,
        formatter: '{c}',
      },
      data: [
        { value: 79.5, name: '电网供电' },
        { value: 20.5, name: '储能放电' },
      ],
    },
  ],
})
const optionThree = reactive<any>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      data: ['大功率用户', '居民用户', '农户用户', '商户用户'],
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334, 390, 330, 220],
    },
  ],
})
watch(
  theme.value,
  () => {
    option.series.itemStyle.color = new graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: lightenColor(theme.value.color, 50) },
      { offset: 1, color: theme.value.color },
    ])
  },
  { immediate: true }
)
const topList = reactive<any>([
  {
    icon: 'airplay-line',
    content: '实时总负荷',
    number: '1987',
    unit: 'kw',
  },
  {
    icon: '',
    content: '今日光伏出力',
    number: '1987',
    unit: 'kw',
  },
  {
    icon: '',
    content: '储能充放电功率',
    number: '87',
    unit: 'kw',
  },
  {
    icon: '',
    content: '在线终端数',
    number: '39',
    unit: '个',
  },
  {
    icon: '',
    content: '平均数据延迟',
    number: '0.8',
    unit: 's',
  },
  {
    icon: '',
    content: '异常告警',
    number: '0',
    unit: '个',
  },
])

const cardInfo = reactive<any>([
  {
    title: '光伏系统',
    en: 'PV Power System',
    data: [
      {
        name: '发电功率',
        en: 'Real-time PV Power',
        value: '24',
        unit: 'KW',
      },
      {
        name: '今日发电量',
        en: 'Todays Total Generation',
        value: '115',
        unit: 'KWh',
      },
      {
        name: '累计发电量',
        en: 'Total Power Generation',
        value: '260',
        unit: 'MWh',
      },
    ],
  },
  {
    title: '台区用电',
    en: 'District Power',
    data: [
      {
        name: '用电功率',
        en: 'Real-time PV Power',
        value: '24',
        unit: 'KW',
      },
      {
        name: '今日用电量',
        en: 'Todays Total Power',
        value: '115',
        unit: 'KWh',
      },
      {
        name: '充电桩功率',
        en: 'Charging Station Power',
        value: '260',
        unit: 'KW',
      },
    ],
  },
  {
    title: '运行评估',
    en: 'Operational Evaluation',
    data: [
      {
        name: '光伏累计收益',
        en: 'Real-time PV Power',
        value: '24',
        unit: '万元',
      },
      {
        name: '减排累计收入',
        en: 'Todays Total Power',
        value: '115',
        unit: 'Tco2',
      },
      {
        name: '绿电量占比',
        en: 'Charging Station Power',
        value: '260',
        unit: '%',
      },
    ],
  },
])
const currentStatus = reactive<any>({
  status: '0',
  user: '0',
  hours: '近一小时',
  currentDay: '当日',
})

const chooseIndex = ref<any>(0)

const handleStyleFun = (e: any, status: any) => {
  chooseIndex.value = status
}
</script>

<template>
  <div class="index-container no-background-container">
    <div class="index-tittle">运维总览</div>

    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card>
          <div class="index-top">
            <el-row :gutter="20">
              <el-col v-for="(item, index) in topList" :key="index" :lg="12" :md="12" :sm="24" :xl="4" :xs="24">
                <div
                  class="card-content"
                  :class="chooseIndex == index ? 'card-choose' : 'card-nochoose'"
                  @click="handleStyleFun($event, index)"
                >
                  <div class="card-icon">
                    <vab-icon :icon="item.icon" />
                  </div>
                  <span style="margin: 0 20px">{{ item.content }}</span>
                  <div>
                    <span class="card-blod">{{ item.number }}</span>
                    <span>{{ item.unit }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>总体运行状态图</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.status" placeholder="请选择">
                  <el-option label="当前+预测" value="0" />
                </el-select>
              </div>
              <div style="margin-left: 20px">
                <el-select v-model="currentStatus.user" placeholder="请选择">
                  <el-option label="所有用户" value="0" />
                </el-select>
              </div>
            </div>
          </div>
          <div style="height: 260px">
            <vab-chart :option="option" />
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left" style="margin-bottom: 10px">
              <span class="title-style"></span>
              <span>台区功能结构</span>
            </div>
          </div>
          <div style="height: 480px">
            <vab-chart :option="optionTwo" />
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>典型用户群体当前负荷对比</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.hours" placeholder="请选择">
                  <el-option label="近一小时" value="0" />
                </el-select>
              </div>
            </div>
          </div>
          <div style="height: 480px">
            <vab-chart :option="optionThree" />
          </div>
        </el-card>
      </el-col>
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>预警中心信息</span>
            </div>
            <div class="middle-right">
              <div>
                <el-select v-model="currentStatus.currentDay" placeholder="请选择">
                  <el-option label="近一小时" value="0" />
                </el-select>
              </div>
              <div style="margin-left: 20px">
                <el-button>查看全部</el-button>
              </div>
            </div>
          </div>
          <div>
            <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#dbf4ee' }" :height="480">
              <el-table-column fixed label="时间" prop="date" width="150" />
              <el-table-column label="设备/用户" prop="name" width="120" />
              <el-table-column label="异常类型" prop="state" width="120" />
              <el-table-column label="异常值" prop="city" width="120" />
              <el-table-column label="严重级别" prop="address" width="120" />
              <el-table-column label="处理状态" prop="tag" width="120" />
              <el-table-column fixed="right" label="操作" min-width="120">
                <template #default>
                  <el-button link size="small" type="primary" @click="handleClick">Detail</el-button>
                  <el-button link size="small" type="primary">Edit</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.index-container {
  :deep() {
    .el-card {
      background-color: #fff;
      .el-card__header {
        position: relative;

        > div > span {
          display: flex;
          align-items: center;

          i {
            margin-right: 3px;
          }
        }
      }

      .el-card__body {
        position: relative;

        .card-footer-tag {
          position: absolute;
          right: var(--el-margin);
          bottom: 15px;
        }
      }
    }
  }
  .index-tittle {
    width: 100%;
    height: 60px;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;
    color: #000;
    background-color: #fff;
  }
  .card-style {
    :deep() {
      .el-card__body {
        height: 550px;
      }
    }
  }
  .index-top {
    width: 100%;
    margin-top: 20px;

    .card-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 60px;
      margin-bottom: 20px;
      line-height: 60px;
      text-align: center;
      background-color: #f2f5fa;
      border-radius: 10px;
      > span {
        margin: 0 20px;
      }
      .card-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 20px;
      }
      .card-blod {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .card-choose {
      position: relative;
      background-color: #cef0e7;
      border: 1px solid #09b388;
      &::before {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 0;
        height: 0;
        content: '';
        border: 6px solid #09b388;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-radius: 6px;
      }
    }

    .card-nochoose {
      background-color: #f2f5fa;
      border: none;
    }
  }
  .index-middle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 18px;
    text-align: center;
    .middle-left {
      display: flex;
      margin: 0;
      vertical-align: middle;
      .title-style {
        display: inline-block;
        width: 5px;
        height: 20px;
        margin-right: 10px;
        background-color: #0ab389;
        border-radius: 0 5px 5px 0;
      }
    }
    .middle-right {
      display: flex;
    }
  }
}
</style>
